.loader{
  display: flex;
  justify-content: center;
  align-items: center;

  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;

  background: #f2f2f2;
  z-index: 9999;
  transition: all .6s ease-out;
}

.loader span{
  display: block;
  width: 2rem;
  height: 2rem;
  border-radius: 1rem;
  background: #0dc7a2;
}

.loader span:first-child{
  transform: rotate(20deg);
  transform-origin: 250% -300%;
  animation: loader_left 1.6s cubic-bezier(1, 1, 0, 0)  infinite;
}

.loader span:last-child{
  transform: rotate(0deg);
  transform-origin: -150% -300%;
  animation: loader_right 1.6s cubic-bezier(1, 1, 0, 0) infinite;
}

@keyframes loader_left{
  0%, 100%{
    transform: rotate(20deg);
  }

  25%, 50%, 75%{
    transform: rotate(0deg);
  }
}

@keyframes loader_right{
  0%, 25%, 75%, 100%{
    transform: rotate(0deg);
  }

  50%{
    transform: rotate(-20deg);
  }
}